<!DOCTYPE html>
<html lang="en">
<head>
	<!--#include file="/link/inc/head.html" -->
	<link rel="stylesheet" href="../js/select2/select2.css">
	<link rel="stylesheet" href="../css/control.css">

	<script src="../js/select2/select2.js"></script>
	<style>
		.select2-container--default .select2-selection--single,
		.select2-container--default .select2-selection--multiple,
		.select2-dropdown {border-color: #ccc}
		div#ui-datepicker-div {z-index: 1000 !important;}
		.select2-container {width: auto!important;min-width: 130px;}
	</style>
<script>
	$(function(){
		$('.table-week td').on('click', function(){
			$(this).children('.tableicell').toggleClass('highlight');
		});
		$('.check-label .all').on('click', function(){
			$('.table-week td .tableicell').toggleClass('highlight');
		});
		$('.choose .radio-select1').on('click',function(){
			$('.ct2').hide();
			$('.ct1').show();
		});
		$('.choose .radio-select2').on('click',function(){
			$('.ct1').hide();
			$('.ct2').show();
		});

	   	$('.content select').select2({
	 			minimumResultsForSearch: Infinity
	   	});
	})
</script>

</head>
<body>
	<!--#include file="/link/inc/header.html" -->
	<div class="wrapper">
		<div class="content ct-mod">
			<div class="hd">
				<div class="tit">上网过滤</div>
			</div>
			<div class="bd">
				<form class="form" autocomplete="off">
					<div class="ct">
						<div class="choose">
							<div class="radio-box">
								<lable class="radio-select"><input type="radio" name="radiooption" class="radiooption  radio-select1" checked>禁止使用</lable>
								<lable class="radio-select"><input type="radio" name="radiooption" class="radiooption  radio-select2">只允许使用</lable>
							</div>
						</div>
						<div class="control-ct ct1">
							<div class="penal">
								<div class="control">
									<label>用户列表</label>
									<div class="field">
										<label class="check-label"><input type="checkbox" class="checkbox">全部人</label>
									</div>
								</div>
								<div class="control">
									<label>用户列表</label>
									<div class="field">
			                            <select name="" id="" multiple="multiple">
			                            	<option>刘一</option>
			                            	<option>陈二</option>
			                            	<option>张三</option>
			                            	<option>李四</option>
			                            	<option>王五</option>
			                            	<option>臭臭</option>
			                            </select>
									</div>
								</div>
								<div class="control">
									<label>IP地址段</label>
									<div class="field2">
										<div class="input-text">
											<input type="text" class="input-text" value="192.168.1.100">
										</div>
										<label>-</label>
										<div class="input-text">
											<input type="text" class="input-text" value="192.168.1.200">
										</div>
									</div>
								</div>
								<div class="control">
									<div class="field2">
										<div class="input-text">
											<input type="text" class="input-text" value="192.168.1.100">
										</div>
										<label>-</label>
										<div class="input-text">
											<input type="text" class="input-text" value="192.168.1.200">
										</div>
									</div>
								</div>
								<div class="control">
									<div class="field">
										<label class="check-label"><input type="checkbox" class="checkbox all">任何时候</label>
									</div>
								</div>
							</div>
							<div class="block-table">
								<div class="grid">
									<ul class="hour-list">
										<li><span>0</span></li>
										<li><span>1</span></li>
										<li><span>2</span></li>
										<li><span>3</span></li>
										<li><span>4</span></li>
										<li><span>5</span></li>
										<li><span>6</span></li>
										<li><span>7</span></li>
										<li><span>8</span></li>
										<li><span>9</span></li>
										<li><span>10</span></li>
										<li><span>11</span></li>
										<li><span>12</span></li>
										<li><span>13</span></li>
										<li><span>14</span></li>
										<li><span>15</span></li>
										<li><span>16</span></li>
										<li><span>17</span></li>
										<li><span>18</span></li>
										<li><span>19</span></li>
										<li><span>20</span></li>
										<li><span>21</span></li>
										<li><span>22</span></li>
										<li><span>23</span></li>
										<li class="hour">小时</li>
									</ul>
									<ul class="week-list">
										<li>星期一</li>
										<li>星期二</li>
										<li>星期三</li>
										<li>星期四</li>
										<li>星期五</li>
										<li>星期六</li>
										<li>星期日</li>
									</ul>
									<table class="table-week">
										<tr class="line1">
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
										</tr>
										<tr class="line2">
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
										</tr>
										<tr class="line3">
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
										</tr>
										<tr>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
										</tr>
										<tr>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
										</tr>
										<tr>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
										</tr>
										<tr>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
											<td><i class="tableicell"></i></td>
										</tr>
									</table>
								</div>
								<div class="tip-block">
									<span>生效时间</span>
									<i></i>
								</div>
							</div>
						</div>
						<div class="control-ct ct2">
							<div class="penal">
								<div class="control">
									<label>用户</label>
									<div class="field">
										<label class="check-label"><input type="checkbox" class="checkbox">全部人</label>
									</div>
								</div>
								<div class="control">
									<label>日期</label>
									<div class="field">
										<label class="check-label"><input type="checkbox" class="checkbox">任何时候</label>
									</div>
								</div>
								<div class="control">
									<label>特权人士</label>
									<div class="field">
			                            <select name="" id="" multiple="multiple">
			                            	<option>刘一</option>
			                            	<option>陈二</option>
			                            	<option>张三</option>
			                            	<option>李四</option>
			                            	<option>王五</option>
			                            	<option>臭臭</option>
			                            </select>
									</div>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</body>
</html>